<template>
  <div class="worksheet">
    <div class="worksheet-title">
      <div class="border"></div>
      <div class="text">我的工作表</div>
    </div>
    <div class="worksheet-content">
      <div class="operate-date">
        <div class="pre">上一周</div>
        <div class="date">2021春 第4周 （4月5日-5月1日）</div>
        <div class="next">下一周</div>
        <div class="export">
          <img src="../../../assets/home/icon-export.png" alt=""/>
          <span>导出课表</span>
        </div>
      </div>
      <div class="table-content">
        <el-table
          :data="tableData"
          :span-method="arraySpanMethod"
          border
          class="table-data"
          row-class-name="row-class"
          :cell-class-name="cellClassDeal"
          header-row-class-name="header-row-class"
          header-cell-class-name="header-cell-class"
        >
          <el-table-column
            prop="title"
            align="center"
            class-name=""
            label-class-name=""
          >
            <template slot-scope="scope" slot="header">
              <div class="weekend-name">节次\日期</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="Mon"
            align="center"
            class-name=""
            label-class-name=""
          >
            <template slot-scope="scope" slot="header">
              <div class="weekend-name">周一</div>
              <div class="weekend-date">(4月5日)</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.Mon.name }}</div>
              <div>{{ scope.row.Mon.position }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="Tue" align="center">
            <template slot-scope="scope" slot="header">
              <div class="weekend-name">周二</div>
              <div class="weekend-date">(4月6日)</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.Tue.name }}</div>
              <div>{{ scope.row.Tue.position }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="Wed" align="center">
            <template slot-scope="scope" slot="header">
              <div class="weekend-name">周三</div>
              <div class="weekend-date">(4月6日)</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.Wed.name }}</div>
              <div>{{ scope.row.Wed.position }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="Thu" align="center">
            <template slot-scope="scope" slot="header">
              <div class="weekend-name">周四</div>
              <div class="weekend-date">(4月7日)</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.Thu.name }}</div>
              <div>{{ scope.row.Thu.position }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="Fri" align="center">
            <template slot-scope="scope" slot="header">
              <div class="weekend-name">周五</div>
              <div class="weekend-date">(4月8日)</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.Fri.name }}</div>
              <div>{{ scope.row.Fri.position }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="Sat" align="center">
            <template slot-scope="scope" slot="header">
              <div class="weekend-name">周六</div>
              <div class="weekend-date">(4月9日)</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.Sat.name }}</div>
              <div>{{ scope.row.Sat.position }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="Sun" align="center">
            <template slot-scope="scope" slot="header">
              <div class="weekend-name">周日</div>
              <div class="weekend-date">(4月10日)</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.Sun.name }}</div>
              <div>{{ scope.row.Sun.position }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "worksheet",
  data() {
    return {
      tableData: [
        {
          title: "第1节",
          Mon: {id: "fxks", name: "法学考试", position: "教室二"},
          Tue: "",
          Wed: "",
          Thu: "",
          Fri: {id: "yxks", name: "医学考试", position: "教室六"},
          Sat: "",
          Sun: "",
        },
        {
          title: "第2节",
          Mon: {id: "fxks", name: "法学考试", position: "教室二"},
          Tue: "",
          Wed: "",
          Thu: {id: "sxk", name: "数学课", position: ""},
          Fri: {id: "yxks", name: "医学考试", position: "教室六"},
          Sat: "",
          Sun: "",
        },
        {
          title: "第3节",
          Mon: {id: "fxks", name: "法学考试", position: "教室二"},
          Tue: "",
          Wed: "",
          Thu: "",
          Fri: "",
          Sat: "",
          Sun: "",
        },
        {
          title: "第4节",
          Mon: "",
          Tue: "",
          Wed: "",
          Thu: "",
          Fri: "",
          Sat: "",
          Sun: "",
        },
        {
          title: "第5节",
          Mon: "",
          Tue: "",
          Wed: "",
          Thu: "",
          Fri: "",
          Sat: {id: "ydyks", name: "印度语考试", position: "教室三"},
          Sun: "",
        },
        {
          title: "第6节",
          Mon: "",
          Tue: "",
          Wed: "",
          Thu: "",
          Fri: "",
          Sat: {id: "ydyks", name: "印度语考试", position: "教室三"},
          Sun: "",
        },
        {
          title: "第7节",
          Mon: "",
          Tue: "",
          Wed: "",
          Thu: "",
          Fri: "",
          Sat: "",
          Sun: "",
        },
        {
          title: "第8节",
          Mon: "",
          Tue: "",
          Wed: "",
          Thu: "",
          Fri: "",
          Sat: "",
          Sun: "",
        },
        {
          title: "第9节",
          Mon: "",
          Tue: "",
          Wed: "",
          Thu: "",
          Fri: "",
          Sat: "",
          Sun: "",
        },
        {
          title: "第10节",
          Mon: "",
          Tue: "",
          Wed: "",
          Thu: "",
          Fri: "",
          Sat: "",
          Sun: "",
        },
        {
          title: "备 注",
          Mon: "",
          Tue: "",
          Wed: "",
          Thu: "",
          Fri: "",
          Sat: "",
          Sun: "",
        },
      ],
      MonArr: [],
      MonPos: 0,
      TueArr: [],
      TuePos: 0,
      WedArr: [],
      WedPos: 0,
      ThuArr: [],
      ThuPos: 0,
      FriArr: [],
      FriPos: 0,
      SatArr: [],
      SatPos: 0,
      SunArr: [],
      SunPos: 0,
      colorMap: {
        fxks: "yw-cell",
        sxk: "ty-cell",
        yxks: "sx-cell",
        ydyks: "dl-cell",
      },
    }
  },
  methods: {
    cellClassDeal({row, column, rowIndex, columnIndex}) {
      let dataArray = Object.values(row);
      return this.colorMap[dataArray[columnIndex].id] || "cell-class";
    },
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 1) {
        const _row_1 = this.MonArr[rowIndex];
        const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
        return {
          rowspan: _row_1,
          colspan: _col_1,
        };
      } else if (columnIndex === 2) {
        const _row_2 = this.TueArr[rowIndex];
        const _col_2 = _row_2 > 0 ? 1 : 0;
        return {
          rowspan: _row_2,
          colspan: _col_2,
        };
      } else if (columnIndex === 3) {
        const _row_3 = this.WedArr[rowIndex];
        const _col_3 = _row_3 > 0 ? 1 : 0;
        return {
          rowspan: _row_3,
          colspan: _col_3,
        };
      } else if (columnIndex === 4) {
        const _row_4 = this.ThuArr[rowIndex];
        const _col_4 = _row_4 > 0 ? 1 : 0;
        return {
          rowspan: _row_4,
          colspan: _col_4,
        };
      } else if (columnIndex === 5) {
        const _row_5 = this.FriArr[rowIndex];
        const _col_5 = _row_5 > 0 ? 1 : 0;
        return {
          rowspan: _row_5,
          colspan: _col_5,
        };
      } else if (columnIndex === 6) {
        //第三列的合并方法,区
        const _row_6 = this.SatArr[rowIndex];
        const _col_6 = _row_6 > 0 ? 1 : 0;
        return {
          rowspan: _row_6,
          colspan: _col_6,
        };
      } else if (columnIndex === 7) {
        //第三列的合并方法,区
        const _row_7 = this.SunArr[rowIndex];
        const _col_7 = _row_7 > 0 ? 1 : 0;
        return {
          rowspan: _row_7,
          colspan: _col_7,
        };
      }
    },
    merage() {
      //要合并的数组的方法
      this.merageInit();
      for (var i = 0; i < this.tableData.length; i++) {
        if (i === 0) {
          //第一行必须存在
          this.MonArr.push(1);
          this.MonPos = 0;
          this.TueArr.push(1);
          this.TuePos = 0;
          this.WedArr.push(1);
          this.WedPos = 0;
          this.ThuArr.push(1);
          this.ThuPos = 0;
          this.FriArr.push(1);
          this.FriPos = 0;
          this.SatArr.push(1);
          this.SatPos = 0;
          this.SunArr.push(1);
          this.SunPos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同 this.MonPos是MonArr内容的序号
          if (
            this.tableData[i].Mon &&
            this.tableData[i].Mon.id === this.tableData[i - 1].Mon.id
          ) {
            this.MonArr[this.MonPos] += 1;
            this.MonArr.push(0);
          } else {
            this.MonArr.push(1);
            this.MonPos = i;
          }
          if (
            this.tableData[i].Tue &&
            this.tableData[i].Tue.id === this.tableData[i - 1].Tue.id
          ) {
            this.TueArr[this.TuePos] += 1;
            this.TueArr.push(0);
          } else {
            this.TueArr.push(1);
            this.TuePos = i;
          }
          if (
            this.tableData[i].Wed &&
            this.tableData[i].Wed.id === this.tableData[i - 1].Wed.id
          ) {
            this.WedArr[this.WedPos] += 1;
            this.WedArr.push(0);
          } else {
            this.WedArr.push(1);
            this.WedPos = i;
          }
          if (
            this.tableData[i].Thu &&
            this.tableData[i].Thu.id === this.tableData[i - 1].Thu.id
          ) {
            this.ThuArr[this.ThuPos] += 1;
            this.ThuArr.push(0);
          } else {
            this.ThuArr.push(1);
            this.ThuPos = i;
          }

          if (
            this.tableData[i].Fri &&
            this.tableData[i].Fri.id === this.tableData[i - 1].Fri.id
          ) {
            this.FriArr[this.FriPos] += 1;
            this.FriArr.push(0);
          } else {
            this.FriArr.push(1);
            this.FriPos = i;
          }
          if (
            this.tableData[i].Sat &&
            this.tableData[i].Sat.id === this.tableData[i - 1].Sat.id
          ) {
            this.SatArr[this.SatPos] += 1;
            this.SatArr.push(0);
          } else {
            this.SatArr.push(1);
            this.SatPos = i;
          }

          if (
            this.tableData[i].Sun &&
            this.tableData[i].Sun.id === this.tableData[i - 1].Sun.id
          ) {
            this.SunArr[this.SunPos] += 1;
            this.SunArr.push(0);
          } else {
            this.SunArr.push(1);
            this.SunPos = i;
          }
        }
      }
    },
    merageInit() {
      this.MonArr = [];
      this.MonPos = 0;
      this.TueArr = [];
      this.TuePos = 0;
      this.WedArr = [];
      this.WedPos = 0;
      this.ThuArr = [];
      this.ThuPos = 0;
      this.FriArr = [];
      this.FriPos = 0;
      this.SatArr = [];
      this.SatPos = 0;
      this.SunArr = [];
      this.SunPos = 0;
    },
  },
  created() {
  },
  mounted() {
    this.merage();
  },
  computed: {},//计算属性
}
</script>

<style scoped>

</style>
